{% extends 'sidebar.html' %}
{% load static %}
{% load sizeformat %}
{% load i18n %}

{% block head %}
{% endblock %}

{% block title %}{% trans '云服务器' %}{% endblock %}

{% block content %}
    <div class="bg-light">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                {% if active_service %}
                    <a class="nav-link active" href="{% url 'servers:server-list' %}?service={{ active_service }}">{% trans '云服务器' %}</a>
                {% else %}
                    <a class="nav-link active" href="{% url 'servers:server-list' %}">{% trans '云服务器' %}</a>
                {% endif %}
            </li>
            <li class="nav-item">
                {% if is_need_vpn %}
                    <a class="nav-link" href="{% url 'vpn:service-vpn' active_service %}">VPN</a>
                {% else %}
                    <a class="nav-link disabled" href="#">VPN</a>
                {% endif %}
            </li>
        </ul>
    </div>
        <div>
            <div class="p-2 mb-2 mt-2">
                <span><strong>{% trans '云服务器列表' %} ({{ count }})</strong></span>
                <span><a class="btn btn-sm btn-primary float-right" href="{% url 'servers:create' %}">
                    {% trans '创建云服务器' %}
                </a></span>
            </div>
            <div>
                {% if servers %}
                <table class="table table-hover table-borderless text-center table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                    <thead class="bg-light">
                        <tr>
                            <th hidden></th>
                            <th style="width: 30px;"></th>
                            <th>{% trans 'IP地址' %}</th>
                            <th>{% trans '镜像' %}</th>
                            <th>CPU/MEM</th>
                            <th style="width: 180px">{% trans '备注' %}</th>
                            <th>{% trans '状态' %}<button class="btn btn-sm btn-outline-success btn-update-vm-status"><i class="fa fa-sync"></i></button></th>
                            <th>{% trans '任务' %}</th>
                            <th>{% trans '操作' %}</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for vm in servers %}
                        <tr id="tr_{{ vm.id }}">
                            <td hidden><input type="checkbox" class="item-checkbox" value="{{ vm.id }}" name="select_vm"></td>
                            <td>
                                {% if vm.service.service_type == 0 %}
                                    <img class="align-self-center" height="25" width="25" alt="" src="{% static 'images/logos/evcloud-logo.png' %}">
                                {% elif vm.service.service_type == 1 %}
                                    <img class="align-self-center" height="25" width="25" alt="" src="{% static 'images/logos/openstack-logo.png' %}">
                                {% elif vm.service.service_type == 2 %}
                                    <img class="align-self-center" height="25" width="25" alt="" src="{% static 'images/logos/vmware-logo.png' %}">
                                {% endif %}
                            </td>
                            <td title="{{ vm.id }}"><b>{{ vm.ipv4 }}</b></td>
                            <td>{{ vm.image }}</td>
                            <td>
                                {{ vm.vcpus }} / {{ vm.ram|sizeformat:'GB' }}
                            </td>
                            <td class="mouse-hover">
                                <div>
                                    <span>{{ vm.remarks|default_if_none:'' }}</span>
                                    <span class="mouse-hover-show edit_vm_remark" data-server-id="{{ vm.id }}" title="{% trans '修改备注' %}">
                                        <i class="fa fa-edit"></i>
                                    </span>
                                </div>
                                <div id="remarks_edit" style="display:none">
                                    <textarea id="remarks">{{ vm.remarks|default_if_none:'' }}</textarea>
                                    <span class="save_vm_remark" title="{% trans '保存备注' %}" data-server-id="{{ vm.id }}">
                                        <i class="fa fa-save"></i>
                                    </span>
                                </div>
                            </td>
                            <td><span id="vm_status_{{ vm.id }}"></span></td>
                            <td><span id="vm_task_{{ vm.id }}"></span></td>

                            <td>
                                {% include 'vm_operations.html' %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                    <div><p class="p-2">0{% trans '云服务器实例' %}</p></div>
                {% endif %}
            </div>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="bg-light">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}
                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
{% endblock %}

{% block sidebar-script %}
    <script type="text/javascript" src="{% static 'zhongkun/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongkun/server_operations.js' %}"></script>
    <script type="text/javascript" src="{% static 'servers/server_list.js' %}"></script>
{% endblock %}
